<template>
	<z-paging ref="paging" v-model="list" @query="getPageList" empty-view-text="暂无数据"
		:empty-view-img-style="{width:'150rpx',height:'150rpx'}" bgColor="#F4F6F8"
		:empty-view-title-style="{marginTop: '30rpx'}">
		<template #refresher="{refresherStatus}">
			<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
			<custom-refresher :status="refresherStatus" />
		</template>

		<template #top>
			<view class="page-bg">
				<view class="list-box pad-30">
					<view class="list">
						<view class="pad-30 bg-white radius20">
							<view class="address font-30 font-w-500">
								地址：{{info.address}}
							</view>
							<view class="betweenX mar-top-30 font-26 font-w-400">
								<view class="color-646464">户主</view>
								<view class="color-text">{{info.holder_username}}</view>
							</view>
							<view class="betweenX mar-top-30 font-26 font-w-400">
								<view class="color-646464">水表编号</view>
								<view class="color-text">{{info.code}}</view>
							</view>
							<view class="betweenX mar-top-30 font-26 font-w-400">
								<view class="color-646464">{{Number(info.balance) < 0  ? '缴费金额：' : '储值：' }}</view>
								<view v-if="info.balance > 0" class="color-success">{{info.balance}} 元</view>
								<view v-else class="color-error">{{Math.abs(info.balance)}} 元</view>
							</view>
							<!-- <view class="betweenX mar-top-30 font-26 font-w-400">
								<view class="color-646464">当前读数</view>
								<view class="color-text">{{info.water_number}} m³</view>
							</view> -->
						</view>
					</view>
					<!-- 月度用水 -->
					<view class="mar-top-30 font-30 font-w-500">用水记录</view>
				</view>
			</view>
		</template>
		<view class="list pad-30" v-for="item in list" :key="item.id" @click="hanldeClickInfo(item.id)">
			<view class="pad-left-right-30 bg-white radius20">
				<view class="pad-bottom-30">
					<view class="betweenX u-border-bottom font-30 pad-top-bottom-30">
						<view class="color-text">抄表时间:{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM')}}</view>
						<view class="font-28 centerY">
							<text class="color-333" v-if="item.settle_status == 1">结清</text>
							<text class="color-error" v-else-if="item.settle_status == 2">欠费</text>
							<up-icon size="28rpx" name="arrow-right"></up-icon>
						</view>
					</view>

					<view class="betweenX centerY pad-top-20 color-646464 font-28">
						<text>上次读数：{{item.last_number}}</text>
						<text class="mar-left-10">当前读数：{{item.new_number}}</text>
					</view>
					
					<view class="betweenX centerY color-646464 pad-top-20 font-28">
						<view>用水量: {{item.consumption}}</view>
						<view class="address">
							应收：{{item.need_pay_amount}} 元
						</view>
					</view>

				</view>
			</view>
		</view>
		<suspend icon="/static/image/service.jpg"></suspend>

	</z-paging>
</template>

<script setup>
	import { ref } from 'vue';
	import { waterDetail, monthlyReport } from '@/api/index.js';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { timeFormat } from '@/node_modules/uview-plus';


	const paging = ref(null);
	const list = ref([]);
	const param = ref({});

	onLoad((option) => {
		param.value = option;
		getWaterDetail();
	})

	// 获取详情数据
	const info = ref({});
	const getWaterDetail = () => {
		waterDetail({ water_meter_id: param.value.id }).then(res => {
			if (res.code == 200) {
				info.value = res.data.info;
			}
		})
	}

	// 月度详情
	const hanldeClickInfo = (id) => {
		uni.navigateTo({
			url: '/pages/monthlyInfo/monthlyInfo?id=' + id + '&monthId=' + info.value.id
		})
	}

	// 获取月度报表
	const getPageList = (page, pageSize) => {
		monthlyReport({
			page,
			ps: pageSize,
			water_meter_id: param.value.id
		}).then(res => {
			if (res?.code == 200) {
				paging.value.complete(res.data.data);
			} else {
				paging.value.complete(false);
			}
		})
	}
</script>

<style scoped>
	.page-bg {
		background: #F4F6F8;
	}
</style>